<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-message</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>Message 消息提示</h2>
				<p>
					常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
				</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础用法</h3>
					<p>从顶部出现，3 秒后自动消失。</p>
				</div>
				<div class="content message">
					<qx-button>打开消息提示</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>不同状态</h3>
					<p>用来显示「成功、警告、消息、错误」类的操作反馈。</p>
				</div>
				<div class="content message2">
					<qx-button>成功</qx-button>
					<qx-button>警告</qx-button>
					<qx-button>消息</qx-button>
					<qx-button>错误</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>可关闭</h3>
					<p>可以添加关闭按钮。</p>
				</div>
				<div class="content message3">
					<qx-button>成功</qx-button>
					<qx-button>警告</qx-button>
					<qx-button>消息</qx-button>
					<qx-button>错误</qx-button>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Message Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>message</td>
						<td>消息文字</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>type</td>
						<td>主题</td>
						<td>string</td>
						<td>success/warning/info/error</td>
						<td>info</td>
					</tr>
					<tr>
						<td>duration</td>
						<td>显示时间, 毫秒</td>
						<td>number</td>
						<td>—</td>
						<td>2000</td>
					</tr>
					<tr>
						<td>showClose</td>
						<td>是否显示关闭按钮</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script type="text/javascript">
			$('.message button').on('click', function () {
				$(this).message({
					msg: '这是一条消息提示'
				})
			})
			$('.message2 button')
				.eq(0)
				.on('click', function () {
					$(this).message({
						type: 'success',
						msg: '恭喜你，这是一条成功消息'
					})
				})
			$('.message2 button')
				.eq(1)
				.on('click', function () {
					$(this).message({
						type: 'warning',
						msg: '警告哦，这是一条警告消息'
					})
				})
			$('.message2 button')
				.eq(2)
				.on('click', function () {
					$(this).message({
						msg: '这是一条消息提示'
					})
				})
			$('.message2 button')
				.eq(3)
				.on('click', function () {
					$(this).message({
						type: 'error',
						msg: '错了哦，这是一条错误消息'
					})
				})

			$('.message3 button')
				.eq(0)
				.on('click', function () {
					$(this).message({
						type: 'success',
						showClose: true,
						msg: '恭喜你，这是一条成功消息'
					})
				})
			$('.message3 button')
				.eq(1)
				.on('click', function () {
					$(this).message({
						type: 'warning',
						showClose: true,
						msg: '警告哦，这是一条警告消息'
					})
				})
			$('.message3 button')
				.eq(2)
				.on('click', function () {
					$(this).message({
						showClose: true,
						msg: '这是一条消息提示'
					})
				})
			$('.message3 button')
				.eq(3)
				.on('click', function () {
					$(this).message({
						type: 'error',
						showClose: true,
						msg: '错了哦，这是一条错误消息'
					})
				})
		</script>
	</body>
</html>
